<template>
  <van-nav-bar class="com-navbar" :title="title" :border="false">
    <template #left>
      <van-icon
        v-if="showHome"
        name="wap-nav"
        class="icon-menu"
        @click="openPopup"
      />

      <van-icon
        v-else
        name="arrow-left"
        class="icon-left"
        @click="onClickLeft"
      />
    </template>
    <template #right v-if="showLog">
      <img data-v-1f5c28be="" src="@/assets/images/logo.2a4fbe3c.jpg" alt="" srcset="" class="nav-bar-right-image">
    </template>
  </van-nav-bar>

  <van-popup class="left-pop" v-model:show="show" position="left" :style="{ padding: '64px' }">
    <div class="container">
      <div class="head">
        <img src="@/assets/images/logo.jpg" class="user-image" />
      </div>
      <div class="meun">
        <div class="meun-item" v-for="(item, index) in funcCellList" :key="index" @click="handleFunc(item.path)">
          <div class="meun-item-title">{{ t(item.label) }}</div>
        </div>
      </div>
      <div class="logout" @click="handleLogOut">{{t('Log Out')}}</div>
    </div>
  </van-popup>
</template>
<script lang="ts" setup>
import { useRouter } from 'vue-router'
import { ref } from 'vue'
import { funcCellList } from './constant'
import { t } from '@/languages'

interface Props {
  // 标题
  title?: string;
  // 是否显示返回
  showHome?: boolean;
  showLog?:boolean
}

withDefaults(defineProps<Props>(), {
  showHome: false,
});

const show = ref(false);

const $router = useRouter();

function openPopup() {
  show.value = !show.value;
}

function onClickLeft() {
  $router.back();
}

function handleFunc(path: string) {
  $router.push({ path })
}

function handleLogOut() {
  localStorage.clear()
  $router.push({ path: '/login' })
}
</script>
<style lang="scss">
.com-navbar {
  background: #0f3a40;
  .nav-bar-right-image{
    display: block;
    width: .96rem;
    height: .96rem;
  }

  .van-nav-bar__title {
    font-weight: 700;
    background: linear-gradient(0deg, #62f792, #63fddb);
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .icon-left {
    color: rgb(94, 243, 200);
    font-size: 24px;
  }

  .icon-menu {
    color: #325d79;
    font-size: 24px;
  }
}

.left-pop  {
  width: 70%;
  height: 100%;
  border-radius: 0 0.53333rem 0.53333rem 0;
  background: #0d111a;
 .container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 1.33333rem;
    overflow: auto;
}
  .user-image {
    width: 3.46667rem;
    height: 2.93333rem;
  }
  .meun {
    padding-right: 0.53333rem;
    margin-top: 0.8rem;
    width: 100%;
    .meun-item {
      padding: 0.4rem 0;
      padding-left: 0.8rem;
      display: flex;
      align-items: center;
      border-bottom: 0.02667rem solid #0f3a40;
      .meun-item-title {
        color: #adabab;
        padding-left: 0.26667rem;
      }
    }
  }
  .logout{
    margin-top: 2.13333rem;
    padding-left: .26667rem;
    line-height: 1.6rem;
    color: #adabab;
    text-align: center;
  }
}
</style>
